<template>
  <div class="map-container">
    <!--主地图-->
    <div id="mainMap" class="main-map"></div>
    <SearchShip
      class="search-ship"
      :class="{ collapse: collapse1 }"
      :filter="{ superviseTenantId: tenantId }"
      @select="doSearchLocateShip"
    ></SearchShip>
    <TileLayerSwitcher class="switch-map" :main-map="mainMap"></TileLayerSwitcher>
    <div v-if="currentShip && currentShip.shipId" class="single-ship-panel" :class="{ collapse: collapse1 }">
      <img src="./images/dz.png" />
      <span>{{ currentShip.shipName }}</span>
      <img src="./images/return.png" @click="cancelShipMode()" />
    </div>

    <div v-if="currentShipWarnList && currentShipWarnList.length > 0" class="warn-list-panel" :class="{ collapse: collapse2 }">
      <div v-for="item in currentShipWarnList" :key="item.warningId" class="warn-item">
        <div
          class="content"
          :class="currentSelectedWarnItem && item.warningId == currentSelectedWarnItem.warningId ? 'content-selected' : ''"
          @click="updateWarnPoint(item)"
        >
          <div class="top">
            <img class="warn-type-img" :src="warnTypeIcons[item.warnTypeCode] ? warnTypeIcons[item.warnTypeCode] : warnTypeIcons['DEFAULT']" />
            <div class="warn-type-name" :title="item.warnType">{{ item.warnType }}</div>
            <img class="warn-level-img" :src="warnLevelIcons['L' + item.level]" />
          </div>
          <div class="bottom">{{ item.warnTime ? item.warnTime.split(' ')[0] : '' }}</div>
        </div>
        <img class="split-line" src="./images/split-line.png" />
      </div>
    </div>
    <div v-if="currentShipDetail" class="ship-hover-info">
      <div class="item top">
        <span class="ship-name">{{ currentShipDetail.shipName }}</span>
        <span class="ship-status">{{ currentShipDetail.voyageStatus }}</span>
      </div>
      <div class="item">MMSI：{{ currentShipDetail.mmsi }}</div>
      <div class="item">船舶类型：{{ currentShipDetail.shipType }}</div>
    </div>
    <!--放大缩小地图工具条-->
    <!-- <div class="map-toolset">
      <div class="map-tool" @click="mapZoomIn">
        <span
          class="el-icon-plus"
          :class="isMapMaxZoom ? 'zoom-disable' : ''"
        ></span>
      </div>
      <div class="map-tool" @click="mapZoomOut">
        <span
          class="el-icon-minus"
          :class="isMapMinZoom ? 'zoom-disable' : ''"
        ></span>
      </div>
    </div> -->
    <!--鼠标位置经纬度坐标-->
    <!-- <div v-show="mouseLat" class="map-mouse-coord">
      <span>{{ mouseLat }}</span>
      <span>{{ mouseLng }}</span>
    </div> -->
  </div>
</template>

<script>
// import { createNamespacedHelpers } from "vuex";
import WebSocketCreator from '@/utils/WebSocketCreator'
import dictUtil from '@/utils/dictUtils'
import { formatNumber } from '@/utils/util'
import { mapState } from 'vuex'
import { L, MainMap, ShipLocationLayer, TrackLayer, ScaleNautic, Measure, Util } from '@haiking/haiking-map'
import '@haiking/haiking-map/dist/haiking-map.min.css'
import { setTiandituMap } from '@/utils/map/MapConfig'
import mapConfig from '@/utils/map/MapConfig'
import TileLayerSwitcher from './TileLayerSwitcher.vue'
// import defaultAlarmPng from '@/views/modules/shipping-bak/monitor/components/realtime-alarm/images/default.png'
import closeIcon from './images/close.png'
import warnTypeIcons from '@/utils/warnModelIcons'
import SearchShip from './SearchShip.vue'

import { getVideoWarnList, getVideoWarnTypes } from '@/api/video'
import { getShipLocationDetail, queryShipLocations, getShipInfoDetail } from '@/api/ship'
setTiandituMap(MainMap)
// const { mapState } = createNamespacedHelpers("user");

export default {
  components: {
    SearchShip,
    TileLayerSwitcher
  },
  data() {
    return {
      webSocket: undefined,
      shipLayer: undefined,
      warnLinePointLayer: undefined,
      mainMap: undefined,
      shipTooltip: undefined,
      locateFlagMarker: undefined,
      measureTool: undefined,
      shipMapLevel: 8,

      // 主工具条抽屉
      favorShipDrawerShow: false,
      filterShipDrawerShow: false,
      measureDisDrawerShow: false,
      locatePointDrawerShow: false,

      // 鼠标经纬度
      mouseLng: '',
      mouseLat: '',

      // 船舶数据
      currentShip: {
        tenantId: undefined,
        shipId: undefined
      },

      currentShipWarnList: [], // 当前选择船舶的报警列表
      currentSelectedWarnItem: undefined, // 当前选中的报警项

      selectedShipInterval: null,

      mapMinZoom: 3,
      mapMaxZoom: 18,
      currentMapZoom: 3,

      warnLevelIcons: {
        L1: require('@/assets/images/firstlevel.png'),
        L2: require('@/assets/images/secondlevel.png'),
        L3: require('@/assets/images/thirdlevel.png')
      },
      warnTypeIcons: warnTypeIcons,

      warnTypeDict: [],
      // 0在船 1锚泊 2靠泊
      shipStatusDict: [
        {
          label: '在航',
          value: '0'
        },
        {
          label: '锚泊',
          value: '1'
        },
        {
          label: '靠泊',
          value: '2'
        }
      ],
      currentShipDetail: undefined
    }
  },
  computed: {
    ...mapState('user', ['tenantId']),
    ...mapState('bigScreen', ['collapse1', 'collapse2']),
    isMapMinZoom() {
      return this.currentMapZoom === this.mapMinZoom
    },
    isMapMaxZoom() {
      return this.currentMapZoom === this.mapMaxZoom
    }
  },
  mounted() {
    this.initMap()
    this.initData()
    this.initSocket()
  },
  destroyed() {
    if (this.shipLayer) {
      this.shipLayer.destroy()
    }

    if (this.selectedShipInterval) {
      clearInterval(this.selectedShipInterval)
    }
  },
  methods: {
    // 初始化数据
    async initData() {
      this.currentShip.tenantId = this.tenantId
      // 先确保字典数据加载完成
      const warningModelResult = await getVideoWarnTypes()
      if (warningModelResult.result && warningModelResult.result.length > 0) {
        this.warnTypeDict = warningModelResult.result.map((val) => {
          return {
            label: val.warningModelName,
            value: val.warningModelCode
          }
        })
      }
    },
    // 初始化地图
    initMap() {
      const mainMap = (this.mainMap = new MainMap('mainMap', {
        minZoom: this.mapMinZoom, // 3,
        maxZoom: this.mapMaxZoom, // 18,
        center: [33.333, 120.098],
        zoom: 3,
        //showChannelMap: false,
        scaleControl: false,
        worldCopyJump: true,
        baseMapColorizer: 'blue',
        showImageMap: true,
        defaultMap: MainMap.mapType.IMAGE_MAP
        // 地图范围限制
        // maxBounds: [
        //   [-90, -180],
        //   [90, 180],
        // ],
        // maxBoundsViscosity: 1,
      }))

      // const scaleNautic = new ScaleNautic({
      //   metric: false,
      //   imperial: false,
      //   nautic: true,
      // });
      // mainMap.addControl(scaleNautic);

      // mainMap.map.on("mousemove", this.updateMouseCoord, this); // 添加鼠标移动监听

      // mainMap.map.on("zoomend", (e) => {
      //   this.currentMapZoom = mainMap.map.getZoom();
      // });
      // 自定义航道图图层
      const channelLayer = this.mainMap.createTileLayer(
        'https://tiandimap.ixunhang.com/tiandi-map/map/getHangdaoMap?tilematrix={z}&tilerow={y}&tilecol={x}'
      )
      this.mainMap.customChannelMap(channelLayer)
      this.warnLinePointLayer = new L.featureGroup().addTo(mainMap.map)

      this.shipLayer = new ShipLocationLayer(mainMap, {
        // minZoom: 1,
        labelMinZoom: 1,
        shipkeyField: 'shipId',
        shipLabelField: 'shipName',
        lonField: 'longitude',
        latField: 'latitude',
        widthField: '###', // 如果只想显示简单船舶样式（三角形）
        updateInterval: 20000,
        simpleShipRadius: 14,
        // selectSizeFormatter: () => {
        //   return [50, 50];
        // },
        // 船舶样式转换，此处具体到业务根据实际情况，给定不同的图标或设置boatSimple的不同颜色
        // boatStyle: (boatInfo) => {
        //   if (boatInfo.tenantId === this.tenantId) {
        //     return L.icon({
        //       iconUrl: myShipIcon,
        //       iconSize: [17, 50],
        //       iconAnchor: [8.5, 25],
        //     });
        //   } else {
        //     return L.icon({
        //       iconUrl: otherShipIcon,
        //       iconSize: [14, 50],
        //       iconAnchor: [7, 25],
        //     });
        //   }
        // },
        // boatStyle: (boatInfo, width, height) => {
        //   return ImgIcons.greenBoat();
        // },
        shipClick: (e) => {
          const shipInfo = e.target.props
          if (this.currentShip && this.currentShip.shipId == shipInfo.shipId) {
            this.cancelShipMode()
          } else {
            this.currentShip = { ...shipInfo }
          }

          this.loadWarnPoints(this.currentShip)

          this.$store.dispatch('bigScreen/setShipInfo', { shipId: shipInfo.shipId, flag: false })

          // if (boatInfo && boatInfo.tenantId === this.tenantId) {
          //   const boatSelect = this.shipList.find((item) => {
          //     return item.id === boatInfo.shipId;
          //   });
          //   this.currentShip = boatInfo;
          //   console.log(boatInfo);
          //   this.showShipDetailInfo(boatSelect, true, true);
          // }
        },
        shipMouseover: (e) => {
          // 阻止船位重叠 多次调用
          if (!this.isShipMouseMove) {
            this.isShipMouseMove = true
            const shipInfo = e.target.props
            getShipInfoDetail(shipInfo.tenantId, shipInfo.shipId).then((res) => {
              if (this.isShipMouseMove && res.result) {
                this.currentShipDetail = {
                  voyageStatus: this.getVoyageStatus(res.result.voyageStatus),
                  shipName: res.result.shipName,
                  shipType: res.result.shipType ? res.result.shipType : '--',
                  mmsi: res.result.mmsi ? res.result.mmsi : '--'
                }
              }
            })
          }
        },
        shipMouseout: (e) => {
          this.isShipMouseMove = false
          this.currentShipDetail = undefined
          // this.shipTooltip.close();
        },
        shipStyleFormatter: (shipInfo) => {
          const style = {
            color: '#808080',
            fillColor: 'yellow'
          }
          if (shipInfo.warningFlag) {
            style.fillColor = '#fb7365'
          }
          return style
        },
        onReadyToUpdateShip: (mapBoundBBox) => {
          const zoom = this.mainMap.map.getZoom()
          const mapBound = mapBoundBBox.split(',')
          let param
          if (zoom < 13) {
            param = {
              type: 'all',
              bbox: mapBoundBBox
            }
          } else {
            param = {
              type: 'range',
              lngMin: mapBound[0],
              lngMax: mapBound[2],
              latMin: mapBound[1],
              latMax: mapBound[3],
              bbox: mapBoundBBox
            }
          }

          // 只看监管的船舶
          param.superviseTenantId = this.tenantId
          if (this.webSocket) {
            this.webSocket.send(JSON.stringify(param))
          }
        }
      })

      // 30秒刷新一次选中的船舶数据
      this.selectedShipInterval = setInterval(() => {
        this.updateSelectedShip()
      }, 1000 * 30)
    },
    latLngTrans(lat, lng) {
      try {
        lat = lat.includes('N') ? parseFloat(lat.replace('N', '')) : lat.includes('S') ? parseFloat(lat.replace('S', '')) * -1 : parseFloat(lat)
        lng = lng.includes('E') ? parseFloat(lng.replace('E', '')) : lng.includes('W') ? parseFloat(lng.replace('W', '')) * -1 : parseFloat(lng)
        return [lat, lng]
      } catch (error) {
        return null
      }
    },
    // 获取航行状态描述  0 在航 2靠泊 1 锚泊
    getVoyageStatus(voyageStatus) {
      let statusText = ''
      switch (voyageStatus) {
        case '0':
          statusText = '在航'
          break
        case '2':
          statusText = '靠泊'
          break
        case '1':
          statusText = '锚泊'
          break

        default:
          statusText = '--'
          break
      }

      return statusText
    },
    // 获取缩略图URL
    getShotcutImgUrl(imgUrl) {
      const picUrl = `${process.env.VUE_APP_MINIO}${this.$setting.downloadUrl}?objectName=` + encodeURIComponent(imgUrl)
      return picUrl
    },
    // 加载报警点数据
    loadWarnPoints(shipInfo) {
      if (!shipInfo) {
        this.warnLinePointLayer?.clearLayers()
        return
      }
      getVideoWarnList({ shipId: shipInfo.shipId, warningFlag: true }).then((res) => {
        // 如果当前没有选中船舶，或者选中船舶被快速切换，导致当前选中船舶与查询的结果船舶不一致
        if (!this.currentShip || this.currentShip.shipId != shipInfo.shipId) {
          return
        }
        const warnList = []
        if (res.result && res.result.length > 0) {
          let warnInfoSelected
          res.result.forEach((val, index) => {
            const warnInfo = val.warningAttachmentVoList && val.warningAttachmentVoList.length > 0 ? val.warningAttachmentVoList[0] : {}

            warnInfo.warnType = this.getWarnType(val.type)
            warnInfo.warnTypeCode = val.type
            warnInfo.level = val.level
            warnInfo.warnTime = val.createTime

            if (!warnInfoSelected) {
              // 找到第一个 有坐标的报警
              if (warnInfo && warnInfo.shootingPosition) {
                warnInfoSelected = warnInfo
              }
            }
            warnList.push(warnInfo)
          })
          this.currentShipWarnList = warnList
          if (!warnInfoSelected) {
            this.currentSelectedWarnItem = undefined
            return
          }

          this.updateWarnPoint(warnInfoSelected)
        } else {
          this.currentShipWarnList = []
          this.warnLinePointLayer && this.warnLinePointLayer.clearLayers()
        }
      })
    },
    cancelShipMode() {
      this.$store.dispatch('bigScreen/setShipInfo', { shipId: null, flag: true })
      this.shipLayer?.clearSelectedShip()
      this.currentShip = undefined
      this.currentShipWarnList = []
      this.warnLinePointLayer && this.warnLinePointLayer.clearLayers()
    },
    // 更新报警点
    updateWarnPoint(warnInfo) {
      this.warnLinePointLayer && this.warnLinePointLayer.clearLayers()
      if (warnInfo && warnInfo.shootingPosition) {
        this.currentSelectedWarnItem = warnInfo
        const lonLat = warnInfo.shootingPosition.split(',')
        const pos = this.latLngTrans(lonLat[1], lonLat[0])

        const marker = L.circleMarker(pos, {
          fillColor: '#eeeeee',
          fillOpacity: 1,
          color: 'red',
          radius: 5,
          props: warnInfo
        }).bindTooltip(
          `
            <div class="shipwarn-tip">
              <div class="shipwarn-tip-top">
                <span class="iconfont icon-dingweiicon"></span>
                <span>${warnInfo.shootingPosition ? warnInfo.shootingPosition : ''}</span>
                <img src="${closeIcon}" onclick="window.closeWarnTooltip()"/>
              </div>
              <div class="shipwarn-tip-middle">
                <div>
                  <div class="field-text">告警类型</div>
                  <div class="field-val" title="${warnInfo.warnType}">${warnInfo.warnType}</div>
                </div>
                <div>
                  <div class="field-text">航速</div>
                  <div class="field-val">${formatNumber(warnInfo.voyageSpeed, 1, true) + '节'}</div>
                </div>

                <div>
                  <div class="field-text">航首向</div>
                  <div class="field-val">${
                    warnInfo.voyageCurrentDirection || warnInfo.voyageCurrentDirection == 0 ? warnInfo.voyageCurrentDirection + '°' : ''
                  }</div>
                </div>
                <div>
                  <div class="field-text">船舶状态</div>
                  <div class="field-val">${this.getShipStatus(warnInfo.shipStatus)}</div>
                </div>


              </div>

              <div class="shipwarn-tip-warnimg">
                <div class="warn-back" style="background-image:url('${
                  warnInfo.fileAddress ? this.getShotcutImgUrl(warnInfo.fileAddress) : defaultAlarmPng
                }')"></div>
              </div>
              <div class="shipwarn-tip-bottom">
                <div class="button">
                  <a href="${'/warning/detail?id=' + warnInfo.warningId}" target="_blank">查看详情</a>
                </div>
              </div>
            </div>

          `,
          { permanent: true, offset: [15, 0] }
        )
        const that = this
        window.closeWarnTooltip = function () {
          marker.closeTooltip()
          that.currentSelectedWarnItem = undefined
        }
        // marker.on("click",e => {
        //   if (e.sourceTarget && e.sourceTarget.options.props && e.sourceTarget.options.props.warningId) {
        //     // window.location = `/modules/maintenance/video/warnMessage/detail?id=${e.sourceTarget.options.props.warningId}`
        //     window.open(`/modules/maintenance/video/warnMessage/detail?id=${e.sourceTarget.options.props.warningId}`) // 跳转到告警详情页面
        //   }
        // })
        if (this.warnLinePointLayer) {
          this.warnLinePointLayer.addLayer(marker)
          const poss = [pos, [this.currentShip.latitude, this.currentShip.longitude]]

          this.mainMap.map.fitBounds(poss)
        }
      }
    },
    // 初始化websocket
    initSocket() {
      const tokenPrefix = this.$auth.getTokenPrefix()
      const token = this.$auth.getToken()
      if (token) {
        const host = location.host
        let wsProtocol = 'wss:'
        if (location.protocol === 'http:') {
          wsProtocol = 'ws:'
        }
        // const url = `${wsProtocol}//jjy.test.ixunhang.com/gisws/sturgeon/transmission/websocket/${tokenPrefix} ${token}`;
        const url = `${wsProtocol}//${host}/gisws/sturgeon/transmission/websocket/${tokenPrefix} ${token}`
        this.webSocket = new WebSocketCreator({
          websocketUrl: url,
          onopen: () => {
            // 立即定位船舶
            if (this.shipLayer) {
              this.shipLayer.reloadShipData()
            }
          },
          onmessage: (e) => {
            try {
              // token 失效重新登录
              if (e.data == 'tokenInvalid') {
                this.$store.dispatch('user/FedLogOut')
                window.location.reload()
                return
              }
              if (e.data != 'heartbeat') {
                const result = JSON.parse(e.data)

                // 测试多个点的默认显示地图范围
                // const aaa = { ...result.locationStandardList[0] };
                // aaa.longitude = parseFloat(aaa.longitude) + 2;
                // aaa.latitude = parseFloat(aaa.latitude) + 3;
                // aaa.shipId = aaa.shipId + "12121";
                // aaa.shipName = "12121";
                // result.locationStandardList = [...result.locationStandardList];
                // result.locationStandardList.push(aaa);
                // result.locationStandardList[0].shipId = "1562311165254234114";
                if (result && result.bbox) {
                  if (this.shipLayer) {
                    this.shipLayer.updateShipData(result.bbox, result.locationStandardList)
                  }
                }
              }
            } catch (error) {
              console.log(error)
            }
          }
        })
      }
    },
    // 定位到本公司的所有船舶
    locateToMyShips() {
      if (!this.tenantId) {
        return
      }

      if (this.isSearchLocate) {
        return
      }

      queryShipLocations({
        type: 'all',
        tenantId: this.tenantId
      }).then((res) => {
        const ships =
          res.result && res.result.locationStandardList && res.result.locationStandardList.length > 0 ? res.result.locationStandardList : []
        const latLons = []
        ships.forEach((ship) => {
          if (ship.longitude || ship.longitude == 0) {
            latLons.push([ship.latitude, ship.longitude])
          }
        })
        if (latLons.length > 0 && this.mainMap) {
          this.mainMap.map.fitBounds(latLons)
        }
      })
    },

    // 更新选中的船舶数据
    updateSelectedShip() {
      if (this.shipLayer) {
        const selectedShip = this.shipLayer.getSelectedShip()
        if (selectedShip) {
          getShipLocationDetail({
            shipId: selectedShip.shipId
          }).then((res) => {
            if (res.result) {
              this.shipLayer.updateSelectedShip(res.result)
            }
          })
        }
      }
    },

    // 设置地图范围到当前租户的船舶（已经定位的船舶）范围
    setMapViewToTenantShips(shipGpsList) {
      if (shipGpsList && shipGpsList.length > 0) {
        const lonLats = shipGpsList.map((item) => {
          return [item.latitude, item.longitude]
        })
        this.mainMap.map.fitBounds(lonLats)
        const mapZoom = this.mainMap.map.getZoom()

        if (mapZoom > this.shipMapLevel) {
          this.mainMap.map.setZoom(this.shipMapLevel)
        }
        // if (!this.mainMap.map.getBounds().contains(L.latLngBounds(lonLats))) {

        // }

        // this.mainMap.map.fitBounds(lonLats);
      }
    },

    // 地图放大
    mapZoomIn() {
      if (this.mainMap) {
        const map = this.mainMap.map
        map.zoomIn()
      }
    },

    // 地图缩小
    mapZoomOut() {
      if (this.mainMap) {
        const map = this.mainMap.map
        map.zoomOut()
      }
    },
    // 更新鼠标移动的 地图坐标
    updateMouseCoord(e) {
      const latLng = e.latlng.wrap() // 解决经度大于180或小于-180的问题
      const lngDM = Util.degreeToDM(latLng.lng, 4)
      const latDM = Util.degreeToDM(latLng.lat, 4)
      const lngFlag = lngDM[0] > 0 ? 'E' : 'W'
      const latFlag = latDM[0] > 0 ? 'N' : 'S'

      // 32°5.226N 118°43.775
      this.mouseLng = `${Math.abs(lngDM[0])}° ${lngDM[1]} ${lngFlag}`
      this.mouseLat = `${Math.abs(latDM[0])}° ${latDM[1]} ${latFlag}`
      // this.getContainer().innerHTML = `${latLng.lng.toFixed(
      //   this.options.precision
      // )}&nbsp;&nbsp;${latLng.lat.toFixed(this.options.precision)}`;
    },

    // 定位搜索到的船舶
    doSearchLocateShip(item) {
      // if (this.mainMap) {
      //   this.mainMap.locatePoint([item.lat, item.lng], 16);
      // }
      // if (this.shipLayer) {
      //   this.shipLayer.locateShip(item, 17);
      // }
      this.doLocateShip(item.shipId)
    },
    doLocateShip(shipId) {
      getShipLocationDetail({
        tenantId: this.tenantId,
        shipId: shipId
      }).then((res) => {
        if (res.result) {
          if (this.shipLayer) {
            this.shipLayer.locateShip(res.result, 17)

            // 定位选中船舶后显示船舶详情弹框
            const shipInfo = res.result

            this.currentShip = { ...shipInfo }
            this.loadWarnPoints(this.currentShip)
            this.$store.dispatch('bigScreen/setShipInfo', { shipId: shipInfo.shipId, flag: true })
          }
        }
      })
    },
    getWarnType(typeCode) {
      return dictUtil.getDictLabelByList(typeCode, this.warnTypeDict)
    },
    getShipStatus(statusCode) {
      return dictUtil.getDictLabelByList(statusCode, this.shipStatusDict)
    }
  }
}
</script>

<style scoped lang="scss">
@import '../../../styles/collapse';
::v-deep .leaflet-tooltip {
  background-color: #050e34; //#122a71;
  border: 1px solid #187684; //#00a2ff;
  color: #ffffff;
  border: none;
  pointer-events: auto !important;
  box-shadow: none !important;
}
::v-deep .leaflet-tooltip-left:before {
  border-left-color: #187684; //#00a2ff;
}
::v-deep .leaflet-tooltip-right:before {
  border-right-color: #187684; //#00a2ff;
}
::v-deep .leaflet-tooltip-bottom:before {
  border-bottom-color: #187684; //#00a2ff;
}
::v-deep .leaflet-tooltip-top:before {
  border-top-color: #187684; //#00a2ff;
}
::v-deep .shipwarn-tip {
  width: 321px;
  height: 344px;
  background-color: none !important;
  background-image: url('./images/maptip-back.png');
  background-size: cover;
  padding: 18px;
  .shipwarn-tip-top {
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 14px;

    img {
      width: 20px;
      height: 20px;
      cursor: pointer;
    }
    span:nth-child(1) {
      color: #d1d1d1;
    }
    span:nth-child(2) {
      margin-left: 11px;
      flex: 1;
    }
  }
  .shipwarn-tip-middle {
    margin-top: 18px;
    padding-left: 26px;
    display: grid;
    grid-template-rows: 50% 50%;
    grid-template-columns: 70% 30%;
    grid-row-gap: 5px;
    .field-text {
      font-size: 14px;
      color: #f0f0f0;
      position: relative;
      &::before {
        content: ' ';
        width: 4px;
        height: 4px;
        background: #20fbf4;
        position: absolute;
        left: -10px;
        top: 8px;
      }
    }
    .field-val {
      font-size: 16px;
      color: #43c2e7;
      text-wrap: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 100%;
      padding-right: 10px;
    }
  }
  .shipwarn-tip-warnimg {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;

    .warn-back {
      background-size: cover;
      background-position: center center;
      width: 277px;
      height: 131px;
    }
  }
  .shipwarn-tip-bottom {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    .button {
      width: 277px;
      height: 30px;
      background: #083062;
      opacity: 1;

      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: 400;

      a {
        width: 100%;
        height: 100%;
        font-size: 16px;
        text-align: center;
        line-height: 29px;
        color: #ffffff;
      }
    }
  }
}
// ::v-deep {
//   .leaflet-tile-container {
//     img {
//       -webkit-filter: invert(1) grayscale(0) saturate(0.5) brightness(1.6) opacity(1) hue-rotate(334deg) sepia(10%) contrast(1) !important;
//       -ms-filter: invert(1) grayscale(0) saturate(0.5) brightness(1.6) opacity(1) hue-rotate(334deg) sepia(10%) contrast(1) !important;
//       -moz-filter: invert(1) grayscale(0) saturate(0.5) brightness(1.6) opacity(1) hue-rotate(334deg) sepia(10%) contrast(1) !important;
//       filter: invert(1) grayscale(0) saturate(0.5) brightness(1.6) opacity(1) hue-rotate(334deg) sepia(10%) contrast(1)  !important;
//     }
//   }
// }
.map-container {
  position: relative;
  //bordermin-height: 100%;
  height: 100%;
  background-color: #203c6d;

  .ship-hover-info {
    background-color: #122a71;
    border: 1px solid #00a2ff;
    color: #ffffff;
    position: absolute;
    right: 10px;
    top: 10px;
    padding: 10px 15px;
    .item {
      margin-bottom: 8px;
      font-size: 18px;
      max-width: 250px;
      width: 250px;
      text-wrap: wrap;
      word-wrap: break-word;
      word-break: break-all;
    }
    .item:last-child {
      margin-bottom: 0px;
    }
    .top {
      display: flex;
      justify-content: space-between;
      .ship-status {
        color: #ffc425;
      }
      .ship-name {
        color: #8fefff;
      }
    }
  }

  .main-map {
    // background-color: #000d2f;
    // background-color: #aac6ee;
    background-color: #203c6d;
    width: 100%;
    height: 100%;
    z-index: 0;
  }

  .search-ship {
    position: absolute;
    left: 31 + $width + px;
    top: 16px;
    transition: $transition1;
    &.collapse {
      left: 31px;
    }
  }

  .switch-map {
    position: absolute;
    right: 18px;
    bottom: 14px;
  }
  .single-ship-panel {
    position: absolute;
    left: 31 + $width + px;
    top: 82px;
    width: 295px;
    height: 43px;
    padding: 0 20px;
    background-image: url('./images/singleship-back.png');
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: $transition1;
    &.collapse {
      left: 31px;
    }
    img {
      width: 23px;
      height: 23px;
      cursor: pointer;
    }
    span {
      flex: 1;
      padding: 0 9px;
      color: #fff;
      font-size: 16px;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }

  .warn-list-panel {
    width: 165px;
    max-height: 841px;

    &::-webkit-scrollbar-track-piece {
      background: rgba(0, 0, 0);
    }
    &::-webkit-scrollbar-thumb {
      background: #414141;
      border-radius: 20px;
    }
    &::-webkit-scrollbar {
      width: 1px;
      height: 10px;
    }
    overflow-y: auto;
    overflow-x: hidden;

    position: absolute;
    right: 18 + $width + px;
    top: 20px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    padding: 2px 0px;
    transition: $transition2;
    &.collapse {
      right: 18px !important;
    }
    .warn-item {
      display: flex;
      justify-content: flex-start;
      flex-direction: column;
      align-items: center;
      .content {
        width: 100%;
        padding: 19px 11px 24px 11px;
        color: #ffffff;
        cursor: pointer;
        .top {
          display: flex;
          justify-content: center;
          align-items: center;
          .warn-type-img {
            width: 25px;
            height: 25px;
          }
          .warn-level-img {
            width: 13px;
            height: 13px;
          }
          .warn-type-name {
            flex: 1;
            font-size: 16px;
            font-weight: 400;
            color: #ffffff;
            padding-left: 7px;
            text-overflow: ellipsis;
            overflow: hidden;
            text-wrap: nowrap;
          }
        }
        .bottom {
          margin-top: 11px;
          padding-left: 7px;
          font-size: 16px;
          font-weight: 400;
          color: #43c2e7;
        }

        &:hover {
          background: #1f3454;
        }
      }
      .content-selected {
        background: #1f3454;
      }
      .split-line {
        width: 138px;
      }
    }
  }

  .map-toolset {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 5px;
    background: #ffffff;
    box-shadow: 0px 2px 6px 0px rgba(64, 100, 197, 0.35);
    border-radius: 3px;
    right: 20px;
    bottom: 10px;

    .map-tool {
      cursor: pointer;
      padding: 7px;
      &:first-child {
        border-bottom: 1px dashed #d8d8d8;
      }
      span {
        font-size: 16px;
        color: #333333;
        font-weight: bold;
      }
      .zoom-disable {
        color: #c9c9c9 !important;
      }
    }
  }

  .map-mouse-coord {
    position: absolute;
    z-index: 1000;
    right: 72px;
    bottom: 10px;
    width: 118px;
    height: 48px;
    background: rgba(62, 62, 62, 0.45);
    box-shadow: 0px 2px 6px 0px rgba(64, 100, 197, 0.35);
    border-radius: 3px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    font-size: 14px;
    padding: 4px 9px 4px 9px;
    white-space: nowrap;
  }
}
</style>
